import GoodsPanel from "@/components/GoodsPanel";
import GoodsPayTable from "@/components/GoodsPayTable";
import PayTotal from "@/components/PayTotal";
import { Search } from "@icon-park/react";
import { createFileRoute } from "@tanstack/react-router";
import { Input } from "antd";
import { debounce } from "lodash";
import { useMemo } from "react";

export const Route = createFileRoute("/")({
  component: RouteComponent,
});

function RouteComponent() {
  const handleChange = useMemo(
    () =>
      debounce((value: string) => {
        // 这里处理搜索逻辑
        console.log("搜索值:", value);
      }, 500),
    []
  );

  return (
    <div>
      <Input
        className="w-1/2"
        placeholder="扫描商品条码或输入商品编码号或商品名称"
        onChange={(e) => handleChange(e.target.value)}
        prefix={
          <Search className="text-gray-500 text-[15px]" theme="outline" />
        }
      />
      {/* 商品列表 */}
      <GoodsPanel />
      <div className="flex items-center gap-5 mt-2 md:flex-col lg:flex-row">
        {/* 收银台 */}
        <GoodsPayTable className="flex-1" />
        {/* 总计金额 */}
        <PayTotal className="self-start w-[350px]" />
      </div>
    </div>
  );
}
